<template>
  <el-dialog title="产品库存详情" width="90vw" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div class="h-[80vh] flex" style="flex-direction: column">
      <div class="flex my-[8px]">
        <div v-for="item in skuColumns" :key="item.value" class="mr-[16px]">
          <VText :title="item.label" :value="skuInfo[item.value]" line="1" />
        </div>
      </div>
      <div class="flex-1">
        <vxe-grid v-bind="orderOptions" ref="tableRef" height="auto" />
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="handleClose"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { computed, nextTick, watch } from "vue"
import XForm from "@/components/XForm/index.vue"

import { ownerInventory } from "@/api/amazon"

const formOption = ref({ inline: true, option: true, showResetButton: true, submitButtonText: "查询" })

const skuInfo = ref({})
const tableRef = ref()
const skuColumns = [
  { label: "SKU", value: "sku" },
  { label: "ASIN", value: "asin" },
  { label: "渠道SKU", value: "platform_sku" },
]

const activeName = ref()
// 查询
const handleSubmitForm = async () => {
  console.log(tableRef?.value)
  tableRef?.value.commitProxy("query")
}

onMounted(() => {})

const modelValue = ref(false)

const emit = defineEmits(["refresh", "close"])

const orderOptions = reactive({
  border: true,
  loading: false,
  resizable: true,
  columns: [
    { field: "warehouse_name", title: "仓库名称" },
    { field: "sku", title: "SKU", width: 100 },
    { field: "seller_sku", title: "渠道SKU", width: 100 },
    { field: "address2", title: "渠道平台名称", width: 160 },
    { field: "custom_sku", title: "海外仓SKU", width: 100 },
    { field: "owner_name", title: "货主", width: "180" },
    { field: "num", title: "可用库存", width: "90" },
    { field: "lock_num", title: "锁定库存", width: "90" },
    { field: "transit_num", title: "在途库存", width: "90" },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    ajax: {
      query: async ({ page }) => {
        const res = await ownerInventory({ data: [{ sku: skuInfo.value.sku }] })
        return res.data?.[0]?.inventory
      },
    },
  },
})

const handleClose = () => {
  modelValue.value = false
  orderOptions.data = []
}
const open = (row) => {
  modelValue.value = true
  skuInfo.value = row
  nextTick(() => {
    handleSubmitForm()
  })
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
